import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { async_getshoplist, async_gettypelist } from '../store/Slice';
import { Anchor, Col, Row } from 'antd';
import { Grid, Image } from 'react-vant';
import Poput from '../components/Poput';

export default function Car() {

  //获取数据
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch(async_getshoplist())
    dispatch(async_gettypelist())
  }, [])
  let obj = useSelector(state => state.crms1)
  //console.log(obj);

  const leftlist = obj.typelist.map(item => {
    return {
      id: `${item.id}`, href: `#${item.id}`, title: item.title, key: `${item.id}`
    }
  })

  //控制弹出层的显示隐藏
  const [visible, setVisible] = useState(false)
  //数据
  const [itemobj, setItemobj] = useState({})

  return (
    <div>
      <Row>
        <Col span={8}>
          {/* 渲染左侧数据 */}
          <Anchor
            items={
              leftlist
            }
          />
        </Col>
        <Col span={16}>
          {/* 渲染右边数据 */}
          {
            obj.typelist.map(item => {
              return <div key={item.id} id={item.id} style={{ height: '700px' }}>
                <h2 style={{ textAlign: 'center' }}>{item.title}</h2>
                {
                  obj.shoplist.filter(pro => pro.typeId == item.id).map((v, index) => {
                    return <div key={index} onClick={() => {
                      setItemobj(v)
                      setVisible(true)
                    }}>
                      <Grid>
                        <Grid.Item icon={<Image src={v.img} height={80} width={80} />} text={v.title} />
                      </Grid>
                    </div>
                  })
                }
              </div>
            })
          }
        </Col>
      </Row>

      {/* 弹出层组件 */}
      <Poput visible={visible} itemobj={itemobj} setVisible={setVisible}></Poput>
    </div>
  )
}
